import PageHeaderWrapper from "@/components/PageHeaderWrapper";
import PageLoading from "@/components/PageLoading";
import { Button, Spin } from "antd";
import React, { Suspense } from "react";
import styles from './index.less'
import ConfigurationPage from "./configurationPage";
import { memDeptAccessInfo } from "@/services/aigcUser";
import DataPage from "./dataPage";
import jsonDataUtils from "@/utils/jsonDataUtils";

class MembersAndDepartments extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      loading:false,
      showPart:"",
      settingInfo:{}
    }
  }

  componentDidMount(){
    this.judgingSynchronization()
  }

  //判断是否同步
  judgingSynchronization = () => {
    this.setState({
      loading:true
    },async () => {
      const res = await memDeptAccessInfo()
      if(res.id){
        res.settingJson = jsonDataUtils.isJsonString(res.setting) ? JSON.parse(res.setting) : {}
        this.setState({
          settingInfo:res,
          loading:false,
          showPart:"data-page"
        },() => {
          if(res.type == 0 || res.type == 2){
            //企微/钉钉 校验同步状态
            this.DataPage.checkSyncStatus()
          }else{
            this.DataPage.getTreeData("init")
          }
        })
      }else{
        this.setState({
          loading:false,
          showPart:"no-docking",
          settingInfo:{}
        })
      }
    })
  }

  //去同步配置
  toConfiguration = () => {
    this.setState({
      showPart:"config-page"
    })
  }

  //切换展示部分
  changePart = flag => {
    switch(flag){
      //完成接入设置后 展示列表页面
      case 'setting-complete':
        this.setState({showPart:"data-page"},() => {
          this.judgingSynchronization()
        })
        break;
    }
  }

  toSettingPage = () => {
    this.setState({
      showPart:"config-page"
    },() => {
      this.ConfigurationPage.changeCurrent(2)
    })
  }

  render(){
    const { loading,showPart,settingInfo } = this.state;
    const { history } = this.props;
    return(
      <Suspense fallback={<PageLoading />}>
        <PageHeaderWrapper className={styles.members}>
          <Spin spinning={loading} style={{position:"absolute",top:'50%',left:"50%",transform:"translate(-50%,-50%)"}}></Spin>

          {/** 未配置同步信息 */}
          {
            showPart === 'no-docking' ? (
              <div className={styles.noDocking}>
                <div>
                  <img src="../../../newUI/no-docking.png" />
                  <div className={styles.tips}>暂未同步通讯录，请点击此处<span onClick={this.toConfiguration}>配置同步</span>信息</div>
                  <Button type="primary" onClick={this.toConfiguration}>同步配置</Button>
                </div>
              </div>
            ) : ''
          }
          { /** 配置页面 */ }
          {
            showPart === 'config-page' ? (
              <ConfigurationPage 
                onRef={ref => this.ConfigurationPage = ref} 
                changePart={this.changePart} 
                settingInfo={settingInfo}
              />
            ) : ''
          }
          {/** 同步数据页面 */}
          {
            showPart === 'data-page' ? (
              <DataPage 
                onRef={ref => this.DataPage = ref} 
                settingInfo={settingInfo}
                toSettingPage={this.toSettingPage} 
                history={history}
              />
            ) : ''
          }
          
        </PageHeaderWrapper>
      </Suspense>
    )
  }
}

export default MembersAndDepartments